<template>
    <h1>加入房间</h1>
    <div>
        <label for="roomNo">桌号:</label>
        <input type="text" id="roomNo" v-model="room" />
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="user" />
    </div>
    <button @click="joinRoom">进入</button>
  </template>
  
  
  <script setup>
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
  
    const room = ref('')
    const user = ref('')
    const router = useRouter()
  
    const joinRoom = () => {
      if (room.value && user.value) {
        router.push({ name: 'Room', params: { room: room.value, user: user.value } })
      }
    }
  
  </script>